<template>
  <view class="office">
    <view v-for="item in list" :key="item.id" class="card flex" :data-url="`pages/office/home/home?id=${item.id}`"
      @click="goto">
      <!-- <image class="cover" :src="genStaticUrl(item.company.images.split(',')[0])" mode="aspectFill" /> -->

      <view class="flex-1 flex-d-sb h">
        <view class="flex">
          <text class="flex-1 p-h20 text-700-130">{{ item.title }}</text>
          <text class="text-700-530">{{ item.money_range }}</text>
        </view>

        <view class="flex p-h20">
          <text v-for="(f, i) in item.fringe.split(',').filter(Boolean)" :key="i" class="tag m-r10 text-500-324">{{ f
          }}</text>
        </view>

        <view class="flex">
          <text class="flex-1 p-h20 text-500-326">{{ item.company.title }}</text>
          <text class="text-500-326">{{ timeFormat(item.createtime * 1000) }} 发布</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
import { useNavigator } from '@/hooks/use-navigator'
import { genStaticUrl, timeFormat } from '@/utils/utils'

defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})

const { goto } = useNavigator()
</script>

<style lang="scss" scoped>
.card {
  height: 210rpx;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #EEEEEE;

  .cover {
    width: 150rpx;
    height: 150rpx;
    border-radius: 10rpx;
  }

  .tag {
    height: 44rpx;
    padding: 0 10rpx;
    border-radius: 4rpx;
    text-align: center;
    line-height: 44rpx;
    background-color: #F3F3F3;
  }
}
</style>
